<!doctype html>
<!--[if IE 8]><html class="ie8 lt-ie10"><![endif]-->
<!--[if IE 9]><html class="ie9 lt-ie10"><![endif]-->
<!--[if gt IE 9]><!-->
<html lang="en">
<!--<![endif]-->

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="cleartype" content="on">
    <meta name="MobileOptimized" content="320">
    <meta name="HandheldFriendly" content="True">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/1.13.0/mocha.min.css"> -->
    <link rel="stylesheet" href="test.css">
    <link rel="stylesheet" href="../index-sli.css">
    <title>Slideout tests</title>
</head>

<body>

    <nav id="menu" class="menu">
        <a href="https://github.com/mango/slideout" target="_blank">
            <header class="menu-header">
                <span class="menu-header-title">Tests</span>
            </header>
        </a>


    </nav>

    <main id="panel" class="panel">
        <header class="panel-header">
            <button class="btn-hamburger js-slideout-toggle"></button>
        </header>
        sdfasd
    </main>
    <script src="../dist/slideout.js"></script>
    <script>
        var doc = window.document;
        var beforeopenEvent = false;
        var openEvent = false;
        var beforecloseEvent = false;
        var closeEvent = false;
        var slideout = new Slideout({
            'panel': doc.getElementById('panel'),
            'menu': doc.getElementById('menu'),
        });

        slideout
            .on('beforeopen', function() {
                beforeopenEvent = true;
            })
            .on('open', function() {
                openEvent = true;
            })
            .on('beforeclose', function() {
                beforecloseEvent = true;
            })
            .on('close', function() {
                closeEvent = true;
            });

        window.onload = function() {
            document.querySelector('.js-slideout-toggle').addEventListener('click', function() {
                slideout.toggle();
            });

            document.querySelector('.menu').addEventListener('click', function(eve) {
                if (eve.target.nodeName === 'A') {
                    slideout.close();
                }
            });
        };
    </script>
</body>

</html>